import "./index.css";
import { useContext } from "react";
import TodoContext from "../../context/TodoContext";

export default function TodoItem(props) {
  const { updateTodo, delTodo } = useContext(TodoContext);

  const handleChange = () => {
    updateTodo(props.todo.id);
  };

  const handleClick = () => {
    delTodo(props.todo.id);
  };

  return (
    <li className="todo-item">
      <label>
        <input
          type="checkbox"
          checked={props.todo.isCompleted}
          onChange={handleChange}
        />
        <span>{props.todo.name}</span>
      </label>
      <button className="btn btn-danger" onClick={handleClick}>
        删除
      </button>
    </li>
  );
}
